<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue" // vue

import { ElMessage, type UploadInstance } from "element-plus"
import { Download } from "@element-plus/icons-vue" // elment按钮图标
// 缓存
defineOptions({
  name: "revenueDr"
})

const data = reactive<any>({
  formData: { val: "123" }
})

const { formData } = toRefs(data)
console.log(formData.value, "字段")

//  #region  导入和导出功能
import { getToken } from "@/utils/cache/cookies"
const uploadRef = ref<UploadInstance>()
const dialogVisibleDR = ref<boolean>(false) // 导入弹窗
const isUploading = ref<boolean>(false)

const uploadheaders = ref<any>({
  token: getToken()
})
// 导入
const actions = ref("")
const handleoffline = () => {
  actions.value = "api/sz/import/offline"
  dialogVisibleDR.value = true
}

const handleclickfarming = () => {
  actions.value = "api/sz/import/clickfarming"
  dialogVisibleDR.value = true
}
const handlepdd = () => {
  actions.value = "api/sz/import/pdd"
  dialogVisibleDR.value = true
}
const handletianmao = () => {
  actions.value = "api/sz/import/tianmao"
  dialogVisibleDR.value = true
}
const handleProfitdetails = () => {
  actions.value = "api/sz/import/Profitdetails"
  dialogVisibleDR.value = true
}

// 上传中禁止上传
const UploadProgress = () => {
  isUploading.value = true
}
// 上传成功
const UploadSuccess = (response: any, file: any, fileList: any) => {
  isUploading.value = false
  uploadRef.value!.clearFiles()
  if (response.code == 200) {
    ElMessage.success("导入成功")
    dialogVisibleDR.value = false
  }
  if (response.code == 500) {
    ElMessage.error(response.message)
    isUploading.value = false
    dialogVisibleDR.value = false
  }
  console.log(response, "1")
  console.log(file, "2")
  console.log(fileList, "3")
}
// 上传失败
const UploadError = (response: any, file: any, fileList: any) => {
  isUploading.value = false
  ElMessage.error("上传失败")
  uploadRef.value!.clearFiles()
  dialogVisibleDR.value = false
  console.log(response, "2")
  console.log(file, "2")
  console.log(fileList, "2")
}
// #endregion
</script>

<template>
  <div class="app-container">
    <el-card style="margin-top: 20px">
      <!-- 收支下载模版 -->
      <div>
        <el-link
          type="primary"
          :icon="Download"
          style="margin-left: 50px; vertical-align: -webkit-baseline-middle"
          href="api/sz/down/downTemplate"
          Download
          >收支下载模版</el-link
        >
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <!-- 收支下载模版 -->
      <div class="drdiv">
        <div>线下费用导入：</div>
        <el-button type="primary" plain icon="Upload" @click="handleoffline">线下费用导入</el-button>
      </div>
      <div class="drdiv">
        <div>活动单导入：</div>
        <el-button type="primary" plain icon="Upload" @click="handleclickfarming">活动单导入</el-button>
      </div>
      <div class="drdiv">
        <div>拼多多导入：</div>
        <el-button type="primary" plain icon="Upload" @click="handlepdd">拼多多导入</el-button>
      </div>
      <div class="drdiv">
        <div>天猫导入：</div>
        <el-button type="primary" plain icon="Upload" @click="handletianmao">天猫导入</el-button>
      </div>
      <div class="drdiv">
        <div>收入成本明细导入：</div>
        <el-button type="primary" plain icon="Upload" @click="handleProfitdetails">收入成本明细导入</el-button>
      </div>
    </el-card>
    <!-- 用户导入对话框 -->
    <el-dialog title=" 导入数据 " v-model="dialogVisibleDR" width="400px" append-to-body>
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        drag
        :limit="1"
        accept=".xlsx, .xls"
        :action="actions"
        multiple
        :headers="uploadheaders"
        :disabled="isUploading"
        :on-progress="UploadProgress"
        :on-success="UploadSuccess"
        :on-error="UploadError"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
          </div>
        </template>
      </el-upload>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.drdiv {
  display: flex;
  align-items: center;
  padding: 10px;
  div {
    width: 150px;
  }
}
</style>
